import { defineComponent, reactive } from "vue";
import styles from "./Page.module.less";
import { useStore as useUserStore } from "@/store/user";
export default defineComponent({
  setup(props, { slots }) {
    const userStore = useUserStore();
    const options = reactive({
      rotate: -18,
      gapX: 100,
      gapY: 100,
      offsetLeft: 50,
      offsetTop: 50,
      fontColor: "rgba(0,0,0,.08)",
      fontSize: 18,
      fontWidth: 600,
      fontFamily: "sans-serif",
    })
    return () => (
      <div class={styles.page}>
        {slots.default?.()}
        <div class={styles.watermarkBox}>
          <div class={styles.watermark} v-watermark={{
            text: userStore.info?.name,
            options,
          }}></div>
        </div>
      </div>
    )
  }
})